import React,{useEffect, useState} from 'react';
import { Table, Button, TablePaginationConfig, notification,Input,Breadcrumb,Switch,Form,Modal,Image,Card } from 'antd'
import { useNavigate } from 'react-router-dom';
import type { ColumnsType } from 'antd/es/table'
import { pro_list,pro_detail,pro_updateFlag } from '../../../api/api';
import './ShopInfo.scss'
interface Props{

}
interface DataType {
    sales: number;
    originprice: number;
    name: string;
    phone: string;
    role: string;
    key: string;
    isseckill:string;
    isrecommend:string;
    issale:string
}

function ShopInfo(props:Props) {
     //决定了每一列渲染什么数据
     const columns: ColumnsType<DataType> = [
        {
            title:'序号',
            dataIndex:'index',
            render:(text,record,index)=>`${index+1}`
        },
        {
            title: '图片',//表格列的名字(显示在表格头上)
            dataIndex: 'img1',//数据对应的属性名
            render:(_,record:any,key)=>(
                <>
                    <img src={record.img1} alt="" width='100' height='100' />
                </>
            )

        },
        {
            title: '商品名',
            dataIndex: 'proname',
            key: 'role',
        },
        {
            title:'品牌',
            dataIndex:'brand',
            key:'brand'
        },
        {
            title:'分类',
            dataIndex:'category',
            key:'category'
        },
        {
            title:'折扣',
            dataIndex:'discount'
        },
        {
            title:'销量',
            dataIndex:'sales',
            defaultSortOrder: 'descend',
            sorter: (a, b) => a.sales - b.sales,
        },
        {
            title: '价格',
            dataIndex: 'originprice',
            key: '_id',
            sorter: (a, b) => a.originprice - b.originprice,

        },
        {
            title:'是否售卖',
            render:(_,record) =>(
                record.issale == '1' ?
                <Switch defaultChecked /> 
                :
                <Switch/>
            )
        },
        {
            title:'是否秒杀',
            render:(_,record:any) =>(
                record.isseckill == '1' ?
                <Switch defaultChecked onChange={()=>{onClickSF(record)}}/> 
                :
                <Switch onChange={()=>{onClickST(record)}}/>
            )
        },
        {
            title:'是否推荐',
            render:(_,record) =>(
                record.isrecommend  == '1' ?
                <Switch defaultChecked onChange={()=>{onClickRF(record)}}/> 
                :
                <Switch onChange={()=>{onClickRT(record)}}/>
            )
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record:any, key) => (
                <>
                {/* <Switch checkedChildren="推荐" unCheckedChildren="秒杀" defaultChecked /> <br/> */}
                <Button type='primary'className='detail' onClick={()=>{showModal(record)}}>详情</Button>
                </>
            )
        }
    ]


    // const { Search } = Input

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [detail,setDetail] = useState<any>({})
    const showModal = (record:any) => {
      pro_detail({proid:record.proid}).then((res)=>{
        console.log(res.data.data[0]);
        setDetail(res.data.data[0])
      })  
      setIsModalOpen(true);
    };
  
    const handleOk = () => {
      setIsModalOpen(false);
    };
  
    const handleCancel = () => {
      setIsModalOpen(false);
    };
    //定义动画效果
    var [loading,setLoading] = useState(false)
    var [prolist,setPro] = useState([])
    var navigate = useNavigate()
    useEffect(()=>{
        pro_list().then((res)=>{
            console.log(res.data);
            setPro(res.data.data)
            
        })
    },[])
      // 修改秒杀状态
      const onClickST = (record:any)=>{
        pro_updateFlag({proid:record.proid,type:'isseckill',flag:true}).then((res)=>{
            console.log(res.data);
            notification.success({message:'已将商品状态设为秒杀'})
            
        })
    }
    const onClickSF = (record:any)=>{
        pro_updateFlag({proid:record.proid,type:'isseckill',flag:false}).then((res)=>{
            console.log(res.data);
            notification.success({message:'已关闭商品秒杀状态'})
        })
    }
    // 修改推荐状态
    const onClickRT = (record:any)=>{
        pro_updateFlag({proid:record.proid,type:'isrecommend',flag:true}).then((res)=>{
            console.log(res.data);
            notification.success({message:'已将商品状态设为推荐'})
        })
    }
    const onClickRF = (record:any)=>{
        pro_updateFlag({proid:record.proid,type:'isrecommend',flag:false}).then((res)=>{
            console.log(res.data);
            notification.success({message:'已关闭商品推荐状态'})
        })
    }
    return (
        <div className='shopinfo'>
             <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
              <Breadcrumb.Item>产品管理</Breadcrumb.Item>
              <Breadcrumb.Item>商品列表</Breadcrumb.Item>
            </Breadcrumb>
            <div className="opet">
                {/* <Search style={{ width: 300, marginRight: 20 }} placeholder="输入商品名称"  enterButton />  */}
            </div>
            <Modal title="商品详情" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} okText='确定' cancelText='取消'>
                <div className="detail">
                    <Image
                      width={200}
                      src={detail.img1}
                    />
                    <Card>
                        <p>{detail.desc}</p>
                    </Card>
                </div>
            </Modal>
            {/* 表格组件 */}
            {/* columns 表格每一列如何渲染 */}
            {/* dataSource 表格的数据源 */}
            <Table columns={columns} loading={loading} dataSource={prolist}  />
        </div>
    );
}

export default ShopInfo;